<template>
  <div class="container register-container">
    <Headbar />
    <HeadTitle title="欢迎注册" switchLogin="login" />
    <div class="login-banner">
      <div class="login-wrap">
        <div class="enter-main">
        <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="login-form" auto-complete="on">
          <el-form-item prop="mobile">
            <el-input class="default-input" v-model="registerForm.mobile" type="phone" maxlength="11" placeholder="请输入您的手机号码" />
          </el-form-item>
          <el-form-item prop="password" class="password">
            <el-input :type="pwdType" class="default-input" v-model="registerForm.password" name="password"
              auto-complete="on"
              placeholder="请设置您的密码" />
            <span class="show-pwd" @click="showPwd">
              <i v-if="pwdType == 'password'"> <img src="@/assets/images/login/close-eye.png"> </i>
              <i v-else> <img src="@/assets/images/login/open-eye.png"> </i>
            </span>
          </el-form-item>
          <el-form-item prop="code">
            <el-input class="input-vcode" v-model="registerForm.code" type="text" maxlength="6" auto-complete="on" placeholder="请输入验证码" />
            <GetVcode type="register" :params="registerForm.mobile" @vcodeCallback="sendVcodeSuccess" />
          </el-form-item>
          <el-form-item class="register-item">
            <el-button type="primary" class="register-button" @click.native.prevent="handleRegister">
              注册
            </el-button>
          </el-form-item>
          <el-form-item prop="isRead">
            <el-checkbox v-model="registerForm.isRead"></el-checkbox>
            <span class="agreement">已经阅读并同意《<a @click="routeToOut(URL.jumpSeller+'/seller/agreement')">用户协议</a>》</span>
          </el-form-item>
        </el-form>
      </div>
      </div>
    </div>
    <Footbars type="login" />
  </div>
</template>

<script>
import GetVcode from '@/components/GetVcode';
import { registerSendCode, registerMember } from '@/api/login'
import { hexMD5 } from '@/utils/md5'
import Headbar from '@/components/Layouts/Headbar'
import Footbars from '@/components/Layouts/Footbars'
import HeadTitle from '@/components/Layouts/HeadTitle'
import config from '@/seo/config'

// 手机号码验证
const validateMobile = (registerRules, value, callback) => {
  if (value == null || value === '') {
    callback(new Error('请输入手机号码'));
  }  else {
    if (value !== '') {
        var reg = /^1[3456789]\d{9}$/;
        if(!reg.test(value)){
          callback(new Error('请输入有效的手机号码'));
        }
      }
    callback();
  }
};
// 密码验证
const validatePass = (registerRules, value, callback) => {
  if (!value) {
    callback(new Error('请设置密码'))
  } else if (value.length < 6 || value.length > 16) {
    callback(new Error('密码长度需在6~16之间,数字和字母组成'));
  }else if(!/[a-zA-Z]+/.test(value) || !/[0-9]+/.test(value)) {
    callback(new Error('密码长度需在6~16之间,数字和字母组成'));
  } else {

    console.log(/^[a-zA-Z0-9]{6,16}$/g.test(value))
    callback()
  }
};

// 验证码验证
const validateCode = (registerRules, value, callback) => {
  if (value == null || value === '') {
    callback(new Error('请输入验证码'));
  }  else {
    if (value !== '') {
      var reg = /^\d{6}$/;
      if(!reg.test(value)){
        callback(new Error('请输入有效的验证码'));
      }
    }
    callback();
  }
};
// 协议验证
const validateRead = (registerRules, value, callback) => {
  if (!value) {
    callback(new Error('请先阅读并勾选同意协议'));
  }  else {
    callback();
  }
};

export default {
  name: 'LoginRegister',
  components: {
    GetVcode,
    Headbar,
    Footbars,
    HeadTitle,
  },
  data() {
    return {
      registerForm: {
        mobile: null,
        code: null,
        password: null,
        isRead: true,
      },
      registerRules: {
        mobile: [{ required: true, trigger: 'blur', validator: validateMobile }],
        code: [{ required: true, trigger: 'blur', validator: validateCode }],
        password: [{ required: true, trigger: 'blur', validator: validatePass }],
        isRead: [{ required: true, trigger: 'change', validator: validateRead }],
      },
      loading: false,
      pwdType: 'password',
      staffId: this.getUrlParams('staffId'),
      redirect: null,
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {

  },
  head: config.register,
  methods: {
    // 点击提交注册
    handleRegister() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
            registerMember({
              client: 5,
              mobile: this.registerForm.mobile,
              password: hexMD5(this.registerForm.password+'yhby'),
              code: this.registerForm.code,
              source: 5,
            }).then(res=>{
              if(res.code == 200){
                this.actionsAfter(res.msg, 'success');
                this.$store.dispatch('Login', {
                  pwForm: {
                    username: res.data.username,
                    password: this.registerForm.password,
                  },
                  codeForm: null,
                  loginActive: 0,
                }).then(() => {
                  setTimeout(()=>{
                    this.$router.push({ path: this.redirect || '/' })
                  }, 1000)
                })
              }else{
                this.actionsAfter(res.data.msg, 'error')
              }
            })
        }
      })
    },
    // 发送短信成功
    sendVcodeSuccess() {
      this.registerForm.code = data;
    },
    // 显示密码
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = 'text'
      } else {
        this.pwdType = 'password'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login-banner{
  background-image: url('../../assets/images/login/bg.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  min-width: 1200px;
  height: 520px;
}
.login-wrap{
  width: 1200px;
  overflow: hidden;
  margin: 0 auto;
  padding-top: 80px;
}
.enter-main{
  background-color: #fff;
  width: 270px;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 50px 30px;
  padding-bottom: 10px;
  float: right;
  .login-form{
    width: 265px;
  }
}
.text-center{
  text-align: center;
}
.enter-main .btn-submit{
  width: 300px;
}
.input-vcode{
  width: 120px;
}
.password{
  position: relative;
}
.show-pwd{
  position: absolute;
  left: 234px;
  top: 5px;
  img{
    width: 20px;
    height: 20px;
  }
}
.agreement{
  font-size: 12px;
  color: #666;
}
.register-button{
  width: 100%;
  padding: 13px 0;
  font-size: 16px;
  background-color: #255B8B;
  border-color: #255B8B;
  transition: all .3s;
  &:hover{
    opacity: 0.9;
  }
}
.register-item{
  margin-bottom: 0;
}
</style>
<style lang="scss">
  .register-container{
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background-color: #255B8B;
      border-color: #255B8B;
    }
    .el-checkbox{
      margin-right: 10px;
    }
  }
</style>
